<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title></title>
    
    <link rel="stylesheet" href="${root}css/seedsui.min.css" >
    <link rel="stylesheet" href="${root}css/square/green.css" >
    <link rel="stylesheet" href="${root}css/test.css"/>
</head>
<body>
<!--。。。。。。。。。。。。。。顶部导航栏。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。  -->
<header>
	<a href="#">
		<i class=" iconfont icon-fanhui"></i>
	</a>
	<div class="title">
		判断题<em class="iconfont icon-down-trangle"></em>
	</div>
	<a href="#">
		<span class="iconfont icon-sangedian-type-1"></span>
	</a>
</header>
 <!--。。。。。。。。。。。。。。。。 动态加载的数据放入这个盒子中 。。。。。。。。。。。。。。。。。。。 -->
<div class="box">
</div>

	
<script src="${root}js/jquery-2.1.3.js"></script>
<script src="${root}js/icheck.min.js"></script>
<script src="${root}js/seedsui.min.js"></script>
<script src="${root}js/rem.js"></script>	
<script type="text/javascript">
	$(function (){
		var res = ${obj!};
		/* var a = new Date (res.start_time);
		var b = new Date (res.end_time); */
		var data = res.result;
		
		var html = '';
		
        for (var i = 0; i < data.length; i++) {
        	html += '<div class="test_' + i + '  active">';
    		html += '<p>' + data[i].title + '</p>';
    		//传递过来的对象 list是json 字符串格式，所以需要改变一下
    		var list=[];
            try {
                list=JSON.parse(data[i].list);
            } catch (e) {
                list=data[i].list;
            }
            //内层循环获取每道题的有几个选项
            for (var j = 0; j < list.length; j++) {
                html += ' <div class="check" id="' + i + 'test_' + list[j].value + '">';
                html += '<input class="' + i + 'test_' + list[j].value + '"  type="' + data[i].type + '" name="' + data[i].name + '" value="' + list[j].value + '"/>';
                html += '<lable for="test_' + list[j].value + '">' + list[j].lable + '</lable>';
                html += ' </div>';
            }
            //这部分是正确答案显示区域	
            html +=' <div class="question">';
            html +='<i class="iconfont icon-xiaolian"> 答对了  </i>';
            html +='<section><span id="answer'+i+'">答案：'+data[i].val+'</span><span class="answerclick"><em class="iconfont icon-down-trangle"></em>答案解析</span></section>';
            html +='</div>';
            html +='<div class="answer_resolution">我要从南走到北，我还要从北走到黑.</div>'
            
            //底部 上下交卷按钮
            html += '<footer>';
            html += '  <a href="#" class="prev" id="'+i+'"><i class=" iconfont icon-zuoyoujian1"></i><span>上一题</span></a>';
            html += '  <a href="#" class="btn"><i class=" iconfont icon-answer-card"></i><span>答题卡</span></a> ';
            html += '  <a href="#" class="next" id="'+i+'"><i class=" iconfont icon-zuoyoujian"></i><span>上一题</span></a>';
            html += '</footer>';
            html += '</div>'; 
        }
        //存放题号的页面        	 
    	html +='<div class="num active hide">';
    	html +='<div class="time">总共<span class="test_sum">'+data.length+'</span>题,&nbsp;&nbsp;答错<span class="test_err"></span>题，&nbsp;正确率<span class="baifenbi"></span></div>';
        for (var i = 0; i < data.length; i++) {
          html += '<a class="" data-numid="' + data[i].name + '" href="#" >' + data[i].name + '</a>';
        }
        html +='<input id="ending" type="button" value="在做一遍"/>';
        html +='</div>';
        
        //把动态生成的html模板添加到页面中
    	document.querySelector('.box').innerHTML = html;
    	//给所有带active的div添加隐藏属性，并让第一道题所在的div显示
    	$('.active').addClass("hide");
        $('.num').removeClass('hide');
      	//模板添加成功之后初始化iCkeck插件的input框样式
        $('input').iCheck({
             checkboxClass: 'icheckbox_square-green',
             radioClass: 'iradio_square-green',
             increaseArea: '20%' // optional
        });
        //禁止input点击
        $('input').iCheck('disable');
        //点击 题号，直接跳转到当前哪一题
        $('.num a').on('click', function () {
            var numid=$(this).context.innerHTML-1;
            $('.test_'+numid+'').removeClass('hide');
            $('.num').addClass('hide');
        })
        //点击下一题
        $('.next').on('click', function () {
          var id=$(this).context.id;
          id=++id;
          if(id>=data.length){
              alert('这是最后一题了');
          }else{
              $('.active').addClass('hide');
              $('.test_'+id+'').removeClass('hide');
          }
        })
        //点击上一题
        $('.prev').on('click', function () {
           var id=$(this).context.id;
           id=--id;
           if(id<0){
              alert('这是第一题了')
           }else{
              $('.active').addClass('hide');
              $('.test_'+id+'').removeClass('hide');
           }
        })
        //点击答题卡
        $(".btn").on("click",function(){  
            	 //让题目num所在的页面显示
            	 $('.active').addClass('hide');
                 $('.num').removeClass('hide');
        })
        var  test_err=0;//定义一个变量存储错误题的数量
		for (var i = 0; i < data.length; i++) {
                $('.' + i + 'test_'+data[i].uval+'').iCheck('check');
                var txt=$('#answer'+i+'').html();
                if(txt=='答案：0'){
                    $('#answer'+i+'').html("答案：正确");
                }else if(txt=='答案：1'){                    
                	$('#answer'+i+'').html("答案：错误");
                };
                if( data[i].uval !== data[i].val ){
                    $('.test_'+i+' .question i').css('color','red');
                    $('.test_'+i+' .question i').html("答错了");
                    $("a[data-numid = " + data[i].name + "]").css('background','#ff5740');  
                    test_err++;
                }
         }	
       	$('.test_err').html(test_err);
       	var  baifenbi=Math.floor((test_err/data.length)*100)
       	$('.baifenbi').html(baifenbi+'%')
	})
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</script>
</body>
</html>